<template>
  <view>
    <view class="tabar" style="height: 65px;line-height: 65px;">
      <view @click="bankClick" style="">
        <image
          class="img"
          src="/static/images/icon-arrow_left.png"
          mode=""
        ></image>
      </view>
      <text>银行卡</text>
      <text class="add" @click="addBlackClick">添加</text>
    </view>
    <scroll-view scroll-y="true" scroll-with-animation="true" class="scrollY">
      <view class="padding20">
        <!-- 银行卡  -->
        <view
          
          :style="`background:${randomColor()}`"
          class="banks mb20"
          v-for="item in blackList"
        >
          <view class="left" @click="cardClick(item)">
            <view class="icon">
              <view class="img-logos"></view>
              <image
                v-if="nums - 1 == 2"
                class="blank-logo"
                src="/static/images/me_bank_icon2.png"
                mode=""
              >
              </image>
              <image
                v-if="nums - 1 == 1"
                class="blank-logo"
                src="/static/images/me_bank_icon3.png"
                mode=""
              >
              </image>
              <image
                v-if="nums - 1 == 0"
                class="blank-logo"
                src="/static/images/me_bank_icon4.png"
                mode=""
              >
              </image>
            </view>
            <view class="title"> {{ item.bankName }} </view> 
            <view class="num">{{ idCard(item.bankCode) }}</view> 
		    <view class="title" style="margin-top:50rpx;"> {{ item.bankAddress }} </view>
             
		  </view>
          <image @click="cardClick(item)"
            class="image"
            src="/static/images/all_bank_bg.png"
            mode=""
          ></image>
		  
		  <view @click="delBank(item)" style="position:absolute;right: 20px;top:10px;color: #fff;">删除</view>
		  
        </view>
      </view>
    </scroll-view>
    <popAdd ref="popRef" :blackNameList="blackNameList" @loadData="loadData" />
  </view>
</template>

<script>
import popAdd from "./compontes/popAdd.vue";
import { mapGetters } from "vuex";
import { getBank, selectBankName,deleteBank } from "@/api/user.js";
import { bgColorArr } from "@/constant/index.js";
export default {
  components: { popAdd },
  data() {
    return {
      nums: 0,
      bgColorArr,
      blackList: [],
      inputObj: {},
      blackNameList: [],
    };
  },
  onLoad(options) {
    const _inout = options.input;
    if (_inout) {
      this.inputObj = JSON.parse(_inout);
    }
	  this.realName();
    this.getBankListData();
    this.selectBankNameList();
  },

  computed: mapGetters(["userInfo", "isLogin"]),
  methods: {
	  delBank(item){
		console.log(item)
		let that=this
					uni.showModal({
							title: '提示：',
							content: '请确认是否要删除?',
							success: function(res) {
								if (res.confirm) {
									deleteBank(item.id).then((res) => {
										if(res.code == 200){
											that.$util.Tips({
											  title: "删除成功",
											});
										}
									      setTimeout(function(){
											  that.getBankListData();
										  },2000)
									  })
									  .catch((res) => {
									    that.$util.Tips({
									      title: res,
									    });
									  });
							     	//TODO
								} else if (res.cancel) {
									// console.log('取消');
									//TODO
								}
							}
					});
		
	  },
    loadData() {
		
      this.getBankListData();
	
    },
    bankClick() {
      uni.navigateBack();
    },
    selectBankNameList() {
      const that = this;
      that.blackNameList = [];
      selectBankName()
        .then((res) => {
          const _data = res.data || [];
          _data.forEach((item) => {
            that.blackNameList.push({
              value: item,
              text: item,
            });
          });
        })
        .catch((res) => {
          this.$util.Tips({
            title: res,
          });
        });
    },
    addBlackClick() {
      this.$refs.popRef.open();
    },
    cardClick(item = {}) {
      item.cardum = item.bankCode;
      item.name = item.realName;
      item.extractType = "bank";
      const json = JSON.stringify(item);
      const _input = JSON.stringify(this.inputObj);
      uni.redirectTo({
        url: `/pages/users/user_cash/index?info=${json}&input=${_input}`,
      });
    },
    getBankListData() {
      const that = this;
      getBank()
        .then((res) => {
          that.blackList = res.data;
        })
        .catch((res) => {
          this.$util.Tips({
            title: res,
          });
          uni.hideLoading();
        });
    },
    idCard(idNum = "") {
      if (idNum) {
        const lastFour = idNum.slice(-4);
        const newArr = new Array(idNum.length - 3).join("*") + lastFour;
        const _reg = newArr.replace(/\s/g, "").replace(/(.{4})/g, "$1 ");
        return _reg;
      }
    },
    randomColor() {
      const _num = Math.floor(Math.random() * (bgColorArr.length - 1 + 1) + 1);
      this.nums = _num;
      return bgColorArr[_num - 1];
    },
	realName(){
	if(this.userInfo.realName == ""){
	
		// return uni.showModal({
		//     title: '提示',content: '您当前未实名，是否前往实名？',
		//             success: function(res) {
		//                 if (res.confirm) {
		//                    console.log('确定');
		//                     setTimeout(function() {
		//                       uni.navigateTo({
		//                       	url:"/pages/settings/realNameAuth/index"
		//                       })
		//                     }, 500);
		                    
		//                 } else if (res.cancel) { 
		// 					uni.navigateBack(1)
		//                     return
		//                 }
		//             }
		//     });    
	} 	
	},
  },
};
</script>
<style lang="less">
/deep/.uni-select {
  border: 1rpx solid transparent !important;
}
</style>
<style lang="scss" scoped>
@import url("../../static/css/gstyle.scss");

.scrollY {
  height: calc(100% - 98px);
  margin-top: 100px;
}

.popup {
  padding: 20rpx;

  .list-input {
    .item {
      border-bottom: 1px solid #f0f0f0;
      background: #fff;

      .row-middle {
        position: relative;
        padding: 0 25rpx;
        margin-top: 20rpx;

        .texts {
          flex: 1;
          font-size: 28rpx;
          height: 89rpx;
          line-height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        input {
          flex: 1;
          font-size: 28rpx;
          height: 80rpx;
          line-height: 80rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

.tabar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  text-align: center;
  height: 98px;
  line-height: 98px;
  background: $theme-color;
  z-index: 99;
  padding: 20rpx 20rpx 0 20rpx;

  .img {
    height: 30rpx;
    width: 30rpx;
  }

  .add {
    padding: 0 20rpx;
  }
}

.banks {
  position: relative;
  display: flex;
  height: 240rpx;
  border-radius: $uni-border-radius-xl;
  padding: 0 30rpx;

  .left {
    color: white;
  width: 85%;
    .num {
      position: absolute;
      top: 60%;
      left: 80rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .title {
      position: absolute;
      top: 40rpx;
      left: 110rpx;
    }

    .icon {
      .img-logos {
        position: absolute;
        top: 30rpx;
        background: white;
        opacity: 0.7;
        border-radius: 50%;
        height: 70rpx;
        width: 70rpx;
      }

      .blank-logo {
        position: absolute;
        top: 37rpx;
        left: 37rpx;
        height: 56rpx;
        width: 56rpx;
      }
    }
  }

  .image {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50%;
    opacity: 0.15;
  }
}
</style>
